
<!doctype html>
<html>
<head>
<title>turn.js - The page flip effect for HTML5</title>
<meta name="viewport" content="width = 1300" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="keywords" content="page,flip,effect,jquery,html5,magazine,book,newspaper,ipad,iphone,android,ios" />
<meta name="description" content="turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5." />
<link rel="icon" type="image/png" href="pics/favicon.png" />
<link href='http://fonts.googleapis.com/css?family=Alegreya:700' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript" src="libs/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="libs/turn.js"></script>
</head>
<body>
<div id="viewport">
<header>
	<nav>
		<a href="#home" class="on">Home</a>
		<a href="#usage">Usage</a>
		<a href="#get">Get turn.js</a>
		<a href="#reference">Reference</a>
		<a href="#credits">Credits</a>
	</nav>

</header>


<div id="controllers" style="display:none;">
	<div class="pages shadows" id="magazine">
		
		<!-- Home -->
		
		<div turn-effect="flipboard">
			<p>The awesome paper-like effect made for HTML5</p>
		</div>
		
		<!-- Usage -->

		<div> 

			<div class="page-content">
				<h1>turn.js</h1>
				<div style="clear:both"></div>
				<p class="definition">is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.</p>
			<ul>
				<li> + Uses Hardware acceleration</li>
				<li> + Works on tablets and smartphones</li>
				<li> + Easy to manipulate</li>
				<li> + Lightweight, only 6K</li>
			</ul>

			</div>

		</div>

		<!-- Quick Reference -->

		<div> 
			<div class="page-content">

			<h2>Getting Started</h2>

			<p>Here's an example:</p>

			
<pre>
<span class="sel-id">#magazine</span>{
	width:<span class="num">800</span>px;
	height:<span class="num">400</span>px;
}
<span class="sel-id">#magazine</span> <span class="sel-class">.turn-page</span>{
	width:<span class="num">400</span>px;
	height:<span class="num">400</span>px;
	background-color:<span class="prop">#ccc</span>;
}
</pre>
			

<pre>
&lt;div id=<span class="string">'magazine'</span>&gt;
	&lt;div&gt; <span class="text">Page 1</span> &lt;/div&gt;
	&lt;div&gt; <span class="text">Page 2</span> &lt;/div&gt;
	&lt;div&gt; <span class="text">Page 3</span> &lt;/div&gt;
&lt;/div&gt;
</pre>


<pre>
$(<span class="string">'#magazine'</span>).turn();
</pre>

			<p>That's it!</p>
			</div>

		</div>

		<!-- Get turn.js 1 -->

		<div> 
			<h1>Get turn.js</h1>
		</div>
		
		<!-- Get turn.js 2 -->

		<div> 
			<div class="page-content">
				<div class="download">
				<p><a href="turn.min.js" target="_blank" class="btn">Download light version</a></p>
				<p><a href="https://github.com/blasten/turn.js" target="_blank" class="btn" style="margin:20px 0px;">Github repository</a></p>
				</div>
<pre>
$ git clone git://github.com/blasten/turn.js.git
</pre>
			<h3>License</h3>
			<p> turn.js is MIT Licensed </p>
			<h3>Support development</h3>
			<p>Is turn.js useful for you? <br />
				Making a donation will help to improve turn.js.</p>

			<form action="https://www.paypal.com/cgi-bin/webscr" id="donate-form" target="_blank" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
	<p><a href="javascript:void(0)" onclick="$('#donate-form').submit();">Donate now</a></p>
</form>



			</div>
		 </div>
		

		<!-- Reference 1 -->
		<div>
			<h1>Quick Reference</h1>
		</div>

		<!-- Reference 2 -->
		<div>
			<div>
			<div class="page-content">


				<h3>Constructor</h3>


<pre>
$('selector').turn([options]);
</pre>
				<p> Parameters:
					<ul>
						<li><b>options</b></li>
						<ul>
							<li><b>width</b> <i>type: number, default: $('selector').width()</i></li>
							<li><b>height</b> <i>type: number, default: $('selector').height()</i></li>
							<li><b>page</b> <i>type: number, default: 1</i></li>
							<li><b>shadows</b> <i>type: boolean, default: true</i></li>
							<li><b>duration</b> <i>type: number, default: 600</i></li>
							<li><b>acceleration</b> <i>type: boolean, default: true</i></li>
						</ul>
					</ul>	
				</p>
				
				<h4>Calling Methods or Properties</h4>
<pre>
$('selector').turn(property | method [, parameters]);
</pre>


				<p><b><a href="https://github.com/blasten/turn.js/wiki/Reference" target="_blank">Full Reference on Github &rarr;</a></b></p>
				</div>
			</div>
		</div>

		<!--   -->
		<div> 
			<div class="page-content">
				<b>Hello Everyone,</b> <br />

				<p>I'm Emmanuel Garcia.</p>
				
				<p>
				I'm native from Venezuela and currently living in Cincinnati, but I'm planning to move to Silicon Valley or New York.
				I've been a front end developer since years ago when I started working in my Bachelor's in CS.
				</p>
				<p>I also have eight years of experience developing scalable software in PHP.</p>
			
				<p>These are some of the things I love to work with: jQuery, node.js, express.js, socket.io, Coffee Script.</p>

				<h2> turn.js </h2>
				<p> I decided to develop turn.js, because it was neccesary as a part of an app for magazines. 
					I spent a while working in the math for this effect.
					 Being inspired by the effect of iBooks and Maps for iOS, I created two objects: one for manipulating the overall publication and another for each individual page. The last one is completely independent, in that it offers an API for creating its own implementations.</p>

				<h2> Contact </h2>
				
				<p>
					<a href="#credits" onclick="window.location.href=decodeURIComponent('mailto%3Ablasten%40gmail.com');">blasten&#64;gmail&#46;com</a>
					or
					<a href="http://www.twitter.com/blasten" target="_blank">@blasten</a>
				</p>

				<p>Any bug, comment or suggestion about turn.js, just click the 
				<a href="https://github.com/blasten/turn.js/issues" target="_blank">feedback button</a>.</p>
		
			</div>
		</div>
	</div>

	<div id="next"> <i></i> </div>
	<div id="previous"> <i></i> </div>
	<div id="shadow-page"></div>
</div>



<footer>
	<div class="share">
		<a class="fb" href="http://www.facebook.com/share.php?u=http://www.turnjs.com" target="_blank"></a>
		<a class="tw" href="https://twitter.com/share?url=http://www.turnjs.com&text=turn.js the page flip effect for HTML5" target="_blank"></a>
		<a class="gp" href="https://plusone.google.com/_/+1/confirm?hl=en&url=http://www.turnjs.com" target="_blank"></a>
	</div>
	&copy; by <a href="http://www.twitter.com/blasten" target="_blank">@blasten</a>
</footer>




<div class="feedback">
	<a href="https://github.com/blasten/turn.js/issues" target="_blank">Feedback</a>
</div>

</div>

<script type="text/javascript">

	window.pages = ['home', 'usage', 'usage', 'get', 'get', 'reference', 'reference', 'credits'];


	function getURL() {
		
		return window.location.href.split('#').shift();

	}

	function getHash() {
		
		return window.location.hash.slice(1);

	}

	function setControllPos() {

		var view = $('#magazine').turn('view');

		if (view[0]) $('#previous').addClass('visible');
		else $('#previous').removeClass('visible');

		if (view[1]) $('#next').addClass('visible');
		else $('#next').removeClass('visible');

	}

	function checkHash(hash) {

		var hash = getHash(), k;

		if ((k=jQuery.inArray(hash, pages))!=-1) {
			$('nav').children().each(function(index, value) { 
				if ($(value).attr('href').indexOf(hash)!=-1) 
					$(value).addClass('on');
				else 
					$(value).removeClass('on');
			});
			return k+1;
		}
		
		return 1;
	}


	function rotated() {
		
		return Math.abs(window.orientation)==90;
	
	}

	function isPhone() {
		
		return navigator.userAgent.match(/iPhone/i);

	}

	function resizeViewport() {

		$('#viewport').css({width: $(window).width(), height: (isPhone() && !rotated()) ? 1670 :  $(document).height()});

	}

	function setScroll() {

		if (isPhone())
			window.scrollTo(0, (rotated()) ? $('#magazine').offset().top-6 : 1);

	}

	function moveMagazine(page) {

	var that = $('#magazine'),
			rendered = that.data().done,
			width = that.width(),
			pageWidth = width/2,
			total = that.data().totalPages,
			options = {duration: (!rendered) ? 0 : 600, easing: 'easeInOutCubic', complete: function(){ $('#magazine').turn('resize'); }};


			$('#controllers').stop();

			if (page==total)
					$('#shadow-page').fadeOut(0);

			if ((page==1 || page == total) && !rotated()) {

				var leftc = ($(window).width()-width)/2,
					leftr = ($(window).width()-pageWidth)/2, 
					leftd = (page==1)? leftr - leftc - pageWidth : leftr - leftc;

				$('#controllers').animate({left: leftd}, options);
				
			} else {
				$('#shadow-page').fadeOut('slow');
				$('#controllers').animate({left: 0}, options);
			}
	}


	$(document).ready(function() {
	
		/* Turn events */
		$('#magazine').
			bind('turning', function(e, page){

				//Let's do something amazing here

				moveMagazine(page);
			

			}).
			bind('turned', function(e, page, pageObj) {


				var rendered = $(this).data().done;

				if (!rendered) {
					moveMagazine(page);
					$('#controllers').fadeIn();
				} else {
					jQuery.each(pages, function(index, value) {
						if (page==index+1) {
							var newUrl = getURL() + '#' + value;
							window.location.href = newUrl;
							return false;
						}
					});
				}

				setControllPos();

				if (page==1) $('#shadow-page').fadeIn('slow');
				else $('#shadow-page').fadeOut((rendered) ? 'slow' : 0);

				setScroll();	

		 }).bind('start', function(e, page) {
		 
			if (page==2)
				$('#previous').hide();
			else if (page==$(this).data().totalPages-1)
				$('#next').hide();

		}).bind('end', function(e, page) {

			if (page!=1) 
				$('#previous').show();
			if (page!=$(this).data().totalPages-1)
				$('#next').show();

		});


		/* Window events */
		$(window).bind('keydown', function(e){
			
			if (e.keyCode==37) 
				$('#magazine').turn('previous');
			else if (e.keyCode==39)
				$('#magazine').turn('next');

		}).bind('hashchange', function() {

			var page = checkHash();
			$('#magazine').turn('page', page);

		}).bind('touchstart', function(e) {

			var t = e.originalEvent.touches;
			if (t[0]) touchStart = {x: t[0].pageX, y: t[0].pageY};

			touchEnd = null;

		}).bind('touchmove', function(e) {

			var t = e.originalEvent.touches, pos = $('#magazine').offset();

			if (t[0].pageX>pos.left && t[0].pageY>pos.top && t[0].pageX<pos.left+$('#magazine').width() && t[0].pageY<pos.top+$('#magazine').height()) {
				
				if (t.length==1)
				e.preventDefault();
			
				if (t[0]) touchEnd = {x: t[0].pageX, y: t[0].pageY};

			}

		}).bind('touchend', function(e) {

			if (window.touchStart && window.touchEnd) {
				var that = $('#magazine'),
					w = that.width()/2,
					d = {x: touchEnd.x-touchStart.x, y: touchEnd.y-touchStart.y},
					pos = {x: touchStart.x-that.offset().left, y: touchStart.y-that.offset().top};
			
				if (Math.abs(d.y)<100)
				 if (d.x>100 && pos.x<w)
				 	$('#magazine').turn('previous');
				 else if (d.x<100 && pos.x>w)
				 	$('#magazine').turn('next');

			}
		}).resize(function() {
 			
 			$('#magazine').turn('resize');

 			resizeViewport();

		});


		$('#next').click(function(e) {
			
			
			$('#magazine').turn('next');
			return false;

		});

		$('#previous').click(function(e) {
			
			e.stopPropagation();

			$('#magazine').turn('previous');
			return false;

		});

		$('#magazine').children(':first').bind('flip', function() {
			
		

		}).find('p').fadeOut(0).fadeIn(2000);


		$('body').bind('orientationchange', function() {
			
			resizeViewport();

			setScroll();

			moveMagazine($('#magazine').turn('page'));

		});

		/* Create internal instance */
		
		if ($(window).width()<=1200)
			$('body').addClass('x1024');
	
		$('#magazine').turn({page: checkHash(), shadows: true, acceleration: $.isTouch});

		resizeViewport();

		setScroll();

	
	});

	/* Google Analytics */


  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28960832-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body>
</html>